<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>试验检测系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        /* 弹窗样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 1000;
            padding: 20px;
        }

        .modal-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        .modal {
            width: 100%;
            max-width: 400px;
            background: white;
            border-radius: 20px;
            overflow: hidden;
            transform: scale(0.9);
            transition: transform 0.3s ease;
            box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
        }

        .modal-overlay.active .modal {
            transform: scale(1);
        }

        .modal-header {
            background: linear-gradient(to right, #3498db, #2980b9);
            color: white;
            padding: 20px;
            text-align: center;
        }

        .modal-body {
            padding: 25px;
        }

        .input-group {
            margin-bottom: 20px;
        }

        .input-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
        }

        .input-field {
            width: 100%;
            padding: 15px;
            border: 2px solid #ddd;
            border-radius: 10px;
            font-size: 16px;
            transition: border-color 0.3s;
        }

        .input-field:focus {
            border-color: #3498db;
            outline: none;
        }

        .input-error {
            color: #e74c3c;
            font-size: 14px;
            margin-top: 5px;
            display: none;
        }

        .modal-footer {
            display: flex;
            justify-content: center;
            padding: 20px;
            gap: 15px;
        }

        .modal-btn {
            padding: 12px 25px;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-size: 16px;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .modal-btn.cancel {
            background: #e74c3c;
            color: white;
        }

        .modal-btn.confirm {
            background: #2ecc71;
            color: white;
        }

        .modal-btn:active {
            transform: translateY(2px);
        }

        /* 响应式设计 */
        @media (max-width: 480px) {
            .container {
                border-radius: 15px;
            }

            .header {
                padding: 20px 15px;
            }

            .content {
                padding: 20px 15px;
            }

            .features {
                flex-direction: column;
            }

            .btn {
                padding: 14px;
            }
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#6366f1',
                        secondary: '#8b5cf6',
                        accent: '#06b6d4'
                    }
                }
            }
        }
    </script>
</head>

<body class="bg-white min-h-screen flex items-center justify-center p-4">
    <div class="max-w-md w-full bg-white rounded-3xl shadow-2xl overflow-hidden border border-gray-200">
        <div class="p-6 text-center">
            <!-- Logo and Title -->
            <div class="mb-6">
                <div
                    class="w-20 h-20 bg-gradient-to-r from-blue-400 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-5 shadow-lg">
                    <i class="fas fa-vial text-white text-3xl"></i>
                </div>
                <h1 class="text-3xl font-bold text-gray-800 mb-3">试验检测系统</h1>
                <p class="text-gray-600 text-base leading-relaxed px-2">
                    欢迎使用专业的试验检测委托系统，为您提供高效、准确的检测服务体验。
                </p>
            </div>

            <!-- Description -->
            <div class="my-8 text-left bg-gray-50 rounded-2xl p-5 shadow-sm">
                <h2 class="text-xl font-semibold text-gray-800 mb-3 flex items-center">
                    <i class="fas fa-info-circle text-blue-500 mr-2"></i> 系统介绍
                </h2>
                <p class="text-gray-600 mb-3">
                    本系统是专为试验检测机构设计的全流程委托管理系统，实现从委托发起、样品管理到报告生成的完整业务闭环。
                </p>
                <ul class="text-gray-600 space-y-2 mt-4">
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                        <span>支持多种检测项目委托</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                        <span>实时跟踪检测进度</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                        <span>电子报告生成与下载</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                        <span>历史记录查询与管理</span>
                    </li>
                </ul>
            </div>

            <!-- Stats -->
            <div class="grid grid-cols-3 gap-3 my-8 text-center">
                <div class="bg-blue-50 rounded-xl p-3">
                    <div class="text-2xl font-bold text-blue-600">1000+</div>
                    <div class="text-xs text-gray-600">已完成委托</div>
                </div>
                <div class="bg-purple-50 rounded-xl p-3">
                    <div class="text-2xl font-bold text-purple-600">50+</div>
                    <div class="text-xs text-gray-600">检测项目</div>
                </div>
                <div class="bg-indigo-50 rounded-xl p-3">
                    <div class="text-2xl font-bold text-indigo-600">99%</div>
                    <div class="text-xs text-gray-600">客户满意度</div>
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="flex flex-col gap-4 mt-8">
                <button onclick="location.href='mobile-order-form.html'"
                    class="bg-gradient-to-r from-blue-500 to-indigo-600 text-white py-4 px-6 text-lg font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 flex items-center justify-center">
                    <i class="fas fa-plus-circle mr-2"></i> 发起委托
                </button>
                <button id="openModal"
                    class="bg-gradient-to-r from-purple-500 to-pink-500 text-white py-4 px-6 text-lg font-semibold rounded-full shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 flex items-center justify-center">
                    <i class="fas fa-history mr-2"></i> 历史记录
                </button>
            </div>

            <!-- Footer -->
            <div class="mt-8 text-gray-500 text-xs">
                <p>© 2025 试验检测系统</p>
            </div>
        </div>
        <!-- 弹窗 -->
        <div class="modal-overlay" id="modalOverlay">
            <div class="modal">
                <div class="modal-header">
                    <h2>请输入手机号码</h2>
                </div>
                <div class="modal-body">
                    <div class="input-group">
                        <label class="input-label">手机号码</label>
                        <input type="tel" class="input-field" id="phoneInput" placeholder="请输入11位手机号码" maxlength="11">
                        <div class="input-error" id="phoneError">请输入有效的手机号码</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="modal-btn cancel" id="cancelBtn">取消</button>
                    <button class="modal-btn confirm" id="confirmBtn">确定</button>
                </div>
            </div>
        </div>

    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const openModalBtn = document.getElementById('openModal');
            const modalOverlay = document.getElementById('modalOverlay');
            const cancelBtn = document.getElementById('cancelBtn');
            const confirmBtn = document.getElementById('confirmBtn');
            const phoneInput = document.getElementById('phoneInput');
            const phoneError = document.getElementById('phoneError');

            // 打开弹窗
            openModalBtn.addEventListener('click', function () {
                modalOverlay.classList.add('active');
                phoneInput.focus();
            });

            // 关闭弹窗
            cancelBtn.addEventListener('click', function () {
                modalOverlay.classList.remove('active');
                phoneError.style.display = 'none';
                phoneInput.value = '';
            });

            // 验证手机号码
            function validatePhone(phone) {
                const regex = /^1[3-9]\d{9}$/;
                return regex.test(phone);
            }

            // 确认并跳转
            confirmBtn.addEventListener('click', function () {
                const phoneNumber = phoneInput.value.trim();

                if (validatePhone(phoneNumber)) {
                    // 存储电话号码到localStorage
                    localStorage.setItem('userPhone', phoneNumber);

                    // 跳转到历史记录页面，传递电话号码作为参数
                    window.location.href = `history.html?phone=${encodeURIComponent(phoneNumber)}`;
                } else {
                    phoneError.style.display = 'block';
                    phoneInput.focus();
                }
            });

            // 点击模态框外部关闭
            modalOverlay.addEventListener('click', function (e) {
                if (e.target === modalOverlay) {
                    modalOverlay.classList.remove('active');
                    phoneError.style.display = 'none';
                    phoneInput.value = '';
                }
            });

            // 按ESC键关闭
            document.addEventListener('keydown', function (e) {
                if (e.key === 'Escape' && modalOverlay.classList.contains('active')) {
                    modalOverlay.classList.remove('active');
                    phoneError.style.display = 'none';
                    phoneInput.value = '';
                }
            });

            // 输入时隐藏错误信息
            phoneInput.addEventListener('input', function () {
                phoneError.style.display = 'none';
            });
        });
    </script>
</body>

</html>